<template>
    <div class="container">
        <CommentList v-if='userinfo.openId'
            type='user' 
            :comments="comments"></CommentList>
        <div v-if='userinfo.openId'>
            <div class="mini-title">我的图书</div>
            <Card 
            v-for='book in books' 
            :key='book.id'
            :book='book'></Card>
            <div v-if='!books.length' class="text-info">暂时还没添加过书，快去添加几本把</div>
        </div>
    </div>
</template>

<script>
import CommentList from '@/components/CommentList'
import Card from '@/components/Card'
import {get} from '@/util'
export default {
    components:{
        CommentList,
        Card
    },
    data() {
        return {
            comments:[],
            userinfo:{},
            books:[]
        }
    },
    methods:{
        init(){
            wx.showNavigationBarLoading()
            this.getComments()
            this.getBooks()
            wx.hideNavigationBarLoading()
            
        },
        async getComments(){
            const comments = await get('/weapp/commentList',{
                openid:this.userinfo.openId
            })
            this.comments = comments.list
        },
        async getBooks(){
            const books = await get('/weapp/booklist',{
                openid:this.userinfo.openId
            })
            this.books = books.list
            console.log('books',this.books)
        }
    },
    onPullDownRefresh(){
        this.init()
        wx.stopPullDownRefresh()
    },
    onShow(){
        if(!this.userinfo.openId){
            let userinfo = wx.getStorageSync('userInfo')
            if(userinfo){
                this.userinfo = userinfo
                this.init()
            }
        }
    }
}
</script>

<style lang='scss'>
.container{
    .text-info{
        margin: 20px 0;
        font-size: 14px;
        color: #666;
        text-align: center;
    }
}
</style>
